<template>
  <view class="whe_maxv xd sy_bg" style="background-color: #f8faf7">
    <view class="pad_10 boxs he_max" style="width: 100%;">
      <view class="mag_t-10">
          <up-tabs :scrollable="false" lineColor="#3a9e5f" :list="tabList" @click="addTab"></up-tabs>
        </view>
      <view class="pad_10 boxs bor_10 ba_white mag_t-10" style="height: 85vh">
          <scroll-view :scroll-y="true" style="height: 100%">
            <view class="img_bg mag_b_10"
                  v-for="(item,index) in list" :key="index"
                  style="height: 130px">
              <view class="wh_f wz_jz">
                <view class="flex_7 jz_flex">
                  <view>
                    <view class="wz_white fz_16">{{ item.name }}</view>
                    <view class="fz_12 mag_t-10" style="color: #fffae3">
                      <text v-if="item.quick_fail" class="bor_5 wz_red" style="background-color: #e1af7a;padding: 0 5px;border: 1px solid #e63946">快失效</text>
                      <text :class="item.quick_fail?'wz_red':''" class="mag_l-5">{{ item.end_date }} 到期</text>
                    </view>
                  </view>
                </view>
                <view class="jz_flex flex_4">
                  <view>
                    <view style="color: #cca34d">
                      <text class="fz_28 em">{{ item.value }}</text>
                      <text class="mag_l-5">{{ item.type_str }}</text>
                    </view>
                    <view v-if="item.is_use==0" class="mag_t-10 fz_12">
                      <text @click="addYhq(item)" class="bor_25 wz_white" style="padding: 3px 15px 3px;background-color: #af7d37">去使用</text>
                    </view>
                  </view>
                </view>
              </view>
              <image v-if="item.is_use==0" src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/19/xcx_1755587905_68OqeyGii0.png" alt=""/>
              <image v-if="item.is_use==1" src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/19/xcx_1755587951_VHFk0thotI.png" alt=""/>
              <image v-if="item.is_use==3" src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/19/xcx_1755587969_4bFjuwBDZr.png" alt=""/>
            </view>
          </scroll-view>
          <view v-if="list.length == 0" class="he_max jz_flex">
            <view class="wz_jz">
              <img src="../img/zwqp.png" style="width: 100px;height: 100px" alt="">
              <view class="mag_t-20 wz_hui">
                <text>暂无卷票</text>
              </view>
            </view>
          </view>
        </view>
    </view>
    <!--    二维码-->
    <up-popup :safeAreaInsetBottom="false"
              @close="close"
              @open="open"
              customStyle="border-radius: 20px"
              :show="isShow" mode="center">
      <view style="padding:40px">
        <view>
          <view class="fz_16 wz_jz">
            <view class="em">
              {{ item.name }}
            </view>
            <view class="pad_10_0 fz_14">核销码 {{item.id}}</view>
            <canvas v-if="isShow" id="qrcode" class="wz_jz" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
<script>
import {getRewardLogDetail, rewardHeXiao, rewardLogs} from "../../Api/shop";
import UQRCode from 'uqrcodejs';
export default {
  name: "index",
  data(){
    return{
      psfs_id:1,
      tabList:[
        {id:"",name: '全部'},
        {id:1,name: '积分'},
        {id:2,name: '优惠券'},
        {id:3,name: '实物'},
        {id:6,name: '奖券'},
      ],
      psfs: [
        {id: 3, title: "统一外送"},
        {id: 1, title: "到站自提"},
        {id: 2, title: "送货上门"}
      ],
      tabIndex:1,
      list:[],
      tabs_id:"",
      isShow:false,
      timer:null,
      item:{}
    }
  },
  onShow(){
    this.getList()
  },
  onUnload(){
    clearInterval(this.timer)
  },
  onHide(){
    clearInterval(this.timer)
  },
  methods:{
    close(){
      this.isShow = false
      clearInterval(this.timer)
    },
    onReady(e) {
      // 获取uQRCode实例
      var qr = new UQRCode();
      // 设置二维码内容
      qr.data = "https://xdjz.towngo.cn/#/QRcode?id="+e;
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = 200;
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
    },
    addYhq(e){
      if(e.type == 3){
        this.item = e
        this.isShow = true
        setTimeout(()=>{
          // 生成二维码
          this.onReady(e.id)
        },1000)
        // 开启定时器轮循核销状态
        this.timer = setInterval(() => {
          setTimeout(() => {
            this.getTowDetail(e.id)
          }, 0)
        }, 300);
      }else{
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    },
    // 查询核销状态
    getTowDetail(e){
      getRewardLogDetail({
        id: e,
      }).then(res=>{
        if(res.data.is_use === 1){
          this.getList()
          clearInterval(this.timer)
          this.isShow = false
          uni.showToast({
            title: "核销成功",
            icon: "none", // 图标类型，可选值：success, none
            duration: 2000 // 显示时间，单位毫秒
          });
        }
      })
    },
    getList(){
      rewardLogs({
        type:this.tabs_id
      }).then(res=>{
        this.list = res.data
      })
    },
    addPsfs(e){
      this.psfs_id = e
    },
    addTab(e){
      this.tabs_id = e.id
      this.getList()
      console.log(e)
    }
  }
}
</script>
<style scoped lang="scss">

</style>
